<template>
	<view class="list-container">
		<van-search :value="params['考核项目']" placeholder="请输入考核名称筛选" show-action @change="handleChange"
			@search="onSearch" @cancel="onCancel" />
		<!-- <view class="search">
			<view class="s-type">
				<dean-popover direction="right" modalLeftPos="6rpx" @select="selectType" :btnList="typeList" chooseText="优先级" isShowIcon></dean-popover>
			</view>
			<view class="search-box">
				<view class="icon">
					<image src="../../static/icon/search.png"></image>
				</view>
				<input @input="handleInput" @confirm="searchWork" v-model="searchText" type="text" class="search-input"
					confirm-type="search" placeholder="请输入考核名称筛选">
			</view>
		</view> -->
		<view v-if="assessList.length">
			<view v-for="item in assessList" :key="item.id">
				<van-cell link-type="navigateTo"
				:url="`/assessSystem/villageList/villageList?item=${JSON.stringify(item)}`" is-link >
				<view class="cell-title" slot="title">
					<view class="circle"></view>
					<text>{{item['考核项目']}}</text>
				</view>
				</van-cell>
			</view>
		</view>
		<van-empty v-else description="暂无考核"></van-empty>
		<uni-load-more v-if="assessList.length >= 15" :status="status" />
		<!-- <van-cell title="单元格" is-link value="内容" />
		<van-cell title="单元格" is-link value="内容" />
		<van-cell title="单元格" is-link value="内容" />
		<van-cell title="单元格" is-link value="内容" /> -->
	</view>
</template>

<script>
	import MyPopover from '@/myComponents/my-popover/dean-popover.vue'
	export default {
		components: {
			MyPopover
		},
		data() {
			return {
				haveMoreWork: true,
				status: 'more',
				assessList: [],
				params: {
					考核项目: '',
					pagination: {
						current: 1,
						pageSize: 15
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				url:'/assessSystem/index/index?id=1',
				searchText: '',
				typeList: ['全部', '流动人口', '常住人口', ],
				statusList: ['全部', '未完成','已完成']
			}
		},
		onLoad() {
			uni.showLoading()
			this.getAssessList()
		},
		onReachBottom() {
			if(this.haveMoreWork) {
				this.params.pagination.current++
				this.status = 'loading'
				this.getMoreAssessList()
			}
			
			console.log('触底了')
		},
		methods: {
			onCancel() {
				console.log('触发')
			},
			onConfirm() {
				console.log('触发')
			},
			searchWork() {
				uni.showLoading()
				this.params.pagination.current = 1
				this.getAssessList()
			},
			handleChange(event) {
				clearTimeout(this.timerId)
				this.timerId = setTimeout(() => {
					this.params.考核项目 = event.detail
					this.getAssessList()
				}, 400)
			},
			// handleInput(event) {
			// 	clearTimeout(this.timerId)
			// 	this.timerId = setTimeout(() =>{
			// 		this.params.考核项目 = event.detail.value
			// 		this.params.pagination.current = 1
			// 		this.getAssessList()
			// 	},500)
			// },
			getAssessList() {
				this.$http2.post('transactionCompete/assessmentManagement/list', this.params).then(res => {
					// console.log(res)
					if(res.code === 10000) {
						res.data.list = res.data.list || []
						let list = res.data.list
						for(let i = 0; i < list.length; i++) {
							for(let j = 0; j < list[i].考核小区.length; j++) {
								if(list[i].考核小区[j].月平均得分) {
									list[i].考核小区[j].月平均得分 = list[i].考核小区[j].月平均得分.toFixed(2)
								}
							}
						}
						this.assessList = res.data.list
					}
				})
			},
			getMoreAssessList() {
				
				this.$http2.post('transactionCompete/assessmentManagement/list', this.params).then(res => {
					console.log(res)
					if(res.code === 10000) {
						res.data.list = res.data.list || []
						this.assessList = [...this.assessList, ...res.data.list]	
						if(this.assessList.length >= res.data.total) {
							this.status = 'noMore'
							this.haveMoreWork = false
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.circle {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #1152FC;
		margin-right: 20rpx;
	}
	.cell-title {
		display: flex;
		align-items: center;
	}
	.list-container {
		background-color: #f5f5f5;
	}
	.search {
		// margin-left: 100rpx;
		width: 750rpx;
		height: 96rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		margin-bottom: 20rpx;

		.s-arrow {
			width: 16rpx;
			height: 16rpx;
			border-top: 2rpx solid #3080FB;
			border-right: 2rpx solid #3080FB;
			transform: rotate(135deg);
			margin-left: 10rpx;
			margin-top: -4rpx;
		}

		.search-box {
			width: 636rpx;
			height: 56rpx;
			margin: 0 30rpx;
			padding-left: 17rpx;
			padding-right: 20rpx;
			// background-color: pink;
			border: 2rpx solid #595959;
			border-radius: 28rpx;
			display: flex;

			.icon {
				width: 50rpx;
				height: 46rpx;
				margin-top: 3rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.search-input {
				width: 450rpx;
				height: 100%;
				color: #999;
			}

			.pop {
				position: absolute;
				right: 60rpx;
			}
		}

		.add {
			font-size: 32rpx;
			font-weight: bold;
			color: #5094FF;
			margin-right: 4rpx;
		}
	}
</style>
